<template>
    <Modal
        :value="value"
        @input="handleInput"
        width="560"
        :closable="false"
        :mask-closable="false"
    >
        <div slot="header">
            {{ title }}
            <Icon class="f-fr" type="ios-close" @click="infoModelClose" />
        </div>
        <div>
            <h2 class="news-title">{{ data.title }}</h2>
            <p class="news-time">
                <template v-if="data.publisher">
                    <span> 发布人：</span>
                    <span>{{ data.publisher }}</span>
                </template>
                <span>发布时间：</span>
                <span>{{ data.publishTime }}</span>
            </p>
            <div class="ql-container">
                <div class="ql-editor" v-html="data.content"></div>
            </div>
        </div>
        <div slot="footer">
            <Button type="default" @click="infoModelClose">关闭 </Button>
        </div>
    </Modal>
</template>

<script>
export default {
    name: 'InfoModel',
    props: {
        value: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: ''
        },
        data: {
            type: Object,
            default: () => {
                return {
                    title: '',
                    publisher: '',
                    publishTime: '',
                    content: ''
                }
            }
        }
    },
    data () {
        return {
            infoModel: false
        }
    },
    methods: {
        handleInput (v) {
            this.$emit('input', v)
        },
        infoModelClose () {
            this.handleInput(false)
        }
    }
}
</script>

<style lang="less">
@import "~@/assets/less/quill.less";
</style>
